<template>
  <div class="home">
    <p>{{ store.vuexnum }}</p>
    <p>{{ store.age }}</p>
    <p><button @click="changeNumFun1">直接修改vuexnum数据</button></p>
    <p><button @click="changeNumFun2">patch修改vuexnum数据</button></p>
    <p><button @click="changeNumFun3">patch批量修改数据</button></p>
    <p><button @click="changeNumFun4">提交acion修改vuexnum数据</button></p>
    <p><button @click="getListDataFun">获取lists数据</button></p>
    <p><button @click="resetStoreFun">重置store数据</button></p>
  </div>
</template>

<script setup>
import { useStore } from '@/store/main'
import { reactive } from 'vue'
let store = useStore();
console.log(store);

// 定义一个方法修改num数据
// 直接修改
let changeNumFun1 = () => {
  store.vuexnum += 1;
}
// 通过$patch
let changeNumFun2 = () => {
  store.$patch({
    vuexnum: store.vuexnum + 1,
  })
}
// $patch批量修改
let changeNumFun3 = () => {
  store.$patch({
    vuexnum: store.vuexnum + 1,
    age: store.age + 1,
  })
}
// acition修改
let changeNumFun4 = () => {
  store.changeVuexNum(5)
}
// 准备请求接口的参数
let listParams = reactive({
  page: 1,
  size: 10,
  type: 'is_best'
});
let getListDataFun = () => {
  store.changeHomeListDatas({
    page: listParams.page,
    size: listParams.size,
    type: listParams.type,
  })
}
// 重置store的数据
let resetStoreFun = () => {
  console.log('重置了');
  store.$reset()
}
</script>
